<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			*{padding: 0px;margin: 0px;}

			html{height: 100%;}
			body{height: 100%;
			     background-color: #eee;}
			.box1{
			      height: 100%;
			      background-color: white;
			      width: 1000px;
			      margin: 0px auto;}
			.box2{width: 780px;
			      background-color: white;
			      margin: 0 auto;
			      height: 100%;}
			h1{text-align: center;
				line-height: 50px;
				margin-bottom: 30px;
				color:red;
				text-shadow: 10px 5px 10px pink;
			   }
			.box3{width: 170px;
				  height:170px;
				  border: 5px solid white;
			      float: left;
			      margin-left: 20px;
			      }
			 .first{margin-left: 0px;}

			img{width: 170px;
			    height: 170px;}
			.box3:hover{box-shadow: 0px 3px 20px #575757;
			            margin-top: -5px;}

		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<h1>图片廊</h1>
				<div class="box3 first">
				<img 
				src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=da61523527f5e0fefa15814234095edd/9825bc315c6034a874a1e5adc11349540923765e.jpg">
				</div>
				<div class="box3">
					<img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=da61523527f5e0fefa15814234095edd/9825bc315c6034a874a1e5adc11349540923765e.jpg">
				</div >
				<div class="box3" >
					<img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=da61523527f5e0fefa15814234095edd/9825bc315c6034a874a1e5adc11349540923765e.jpg">
				</div >
				<div class="box3">
					<img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=da61523527f5e0fefa15814234095edd/9825bc315c6034a874a1e5adc11349540923765e.jpg">
				</div>
			</div>
		</div>
		
	</body>
</html>